<#include "header.ftl" />
<#setting classic_compatible=true>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>China Area List</title>
    <link rel="stylesheet" href="${SERVER_SIDE_CONTEXT}/statics/css/data_mart.css" />
    <link rel="stylesheet" href="${SERVER_SIDE_CONTEXT}/statics/font-awesome/css/font-awesome.min.css" />
    <script type="text/javascript" src="${SERVER_SIDE_CONTEXT}/statics/js/jquery-1.11.1.js"></script>
    <style type="text/css">
        <!--
        .STYLE1 {
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            font-size: 36px;
            color: #FF0000;
        }

        .STYLE2 {
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            font-size: 18px;
            color: #FF0000;
        }

        .STYLE13 {
            font-size: 24
        }

        .STYLE14 {
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            font-size: 24px;
        }

        .STYLE15 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 24px;
        }

        td {
            width: 1px;
            white-space: nowrap; /* 自适应宽度*/
            word-break:  keep-all; /* 避免长单词截断，保持全部 */
        }

        .button {
            background-color: grey; /* grey */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            width: 730px;
        }

        .input{
            outline-style: none ;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 13px 14px;
            width: 210px;
            font-size: 14px;
            font-weight: 700;
            font-family: "Microsoft soft";
        }

        .input:focus{
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }

        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
        }

        ul.pagination li {display: inline;}

        ul.pagination li a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }

        li.active {
            color: aqua;
        }
        -->
    </style>

    <script src="${SERVER_SIDE_CONTEXT}/statics/js/jquery-1.11.1.js"></script>

    <script type="application/javascript">
        function getFormData(formId){
            var data = {};
            var results = $(formId).serializeArray();
            $.each(results,function(index,item){
                //文本表单的值不为空才处理
                if(item.value && $.trim(item.value)!=""){
                    if(!data[item.name]){
                        data[item.name]=item.value;
                    }else{
                        //name属性相同的表单，值以英文,拼接
                        data[item.name]=data[item.name]+','+item.value;
                    }
                }
            });
            return data;
        }
        function doIt(para) {
            var params = getFormData("form");
            if (para != undefined) {
                params["pageSize"] = para.pageSize;
                params["pageNo"] = para.pageNo;
            }
            $.get("queryArea", params, function (data) {
                $("#result").html(data);
            })
        }
    </script>
</head>

<body>

<div align="center"><span class="STYLE1">中国行政区划 </span></div>
<div align="center">
    <form action="queryArea" method="get" id="form">
        <input class="input" type="text" name="name" placeholder="区划名称"/>
        <input class="input" type="text" name="level" placeholder="区划级别"/>
        <input class="input" type="text" name="zipCode" placeholder="邮政编码"/><br>
        <input class="input" type="text" name="cityCode" placeholder="区号"/>
        <input class="input" type="text" name="code" placeholder="行政区码"/>
        <input class="input" type="text" name="parentCode" placeholder="父级行政区码"/><br>
        <input class="button" type="button" onclick="doIt({'pageNo':'1', 'pageSize':'${DEFAULT_PAGE_SIZE}'})" value="查询"/>
    </form>
</div>
<div id="result" />
</body>
</html>
